<template>
  <el-card>
    <el-row>
      <el-col :span="8">
        <span>用户创建时间：</span>
        <el-select v-model="queryParam.dateType" placeholder="请选择" @change="change">
          <el-option v-for="item in dateTypes" :key="item.code" :label="item.msg" :value="item.code">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-table :data="userInfos" highlight-current-row stripe v-loading="loading" element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading" element-loading-background="#fafafa" style="width: 100%; margin-top: 10px;">
      <el-table-column type="index" label="编号" align="center" width="60">
      </el-table-column>
      <el-table-column prop="uid" label="uid" align="center" width="120">
      </el-table-column>
      <el-table-column prop="nickName" label="昵称" align="center" width="120">
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center" width="200">
      </el-table-column>
      <el-table-column prop="zfb" label="支付宝" align="center" width="150">
      </el-table-column>
      <el-table-column prop="zfbName" label="支付宝名称" align="center" width="100">
      </el-table-column>
      <el-table-column prop="email" label="邮箱" align="center" width="180">
      </el-table-column>
      <el-table-column prop="chiefUid" label="邀请人uid" align="center" width="120">
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination @current-change="handleCurrentChange" :current-page="queryParam.page" @size-change="handleSizeChange"
                   :page-size="queryParam.size" layout="total, sizes, prev, pager, next, jumper" background
                   :total="count">
    </el-pagination>
  </el-card>
</template>

<script>
import {
  getUserInfoList,
  getDic,
  updateUserInfo
} from '@/apis/XcxApi'

export default {
  name: 'User',
  data () {
    return {
      currentUid: '',
      userInfos: [],
      count: 0,
      queryParam: {
        page: 1,
        size: 10,
        dateType: null,
      },
      dateTypes: [],
      loading: false
    }
  },
  created () {
    this.getDateCondition()
    this.getUserInfoList()
  },
  methods: {
    getUserInfoList () {
      this.loading = true
      getUserInfoList(this.queryParam).then(res => {
        if (res.data) {
          this.count = res.data.count
          this.userInfos = res.data.getUserInfos
        } else {
          this.count = 0
          this.userInfos = []
        }
        this.loading = false
      })
    },
    change () {
      this.queryParam.page = 1
      this.getUserInfoList()
    },
    // 每页显示的数量改变时
    handleSizeChange (val) {
      this.queryParam.size = val
      this.getUserInfoList()
    },
    // 当前页码改变时
    handleCurrentChange (val) {
      this.queryParam.page = val
      this.getUserInfoList()
    },
    // 获取日期条件信息
    getDateCondition () {
      getDic({
        type: 'dateCondition'
      }).then(res => {
        this.dateTypes = res.data
      })
    }
  }
}
</script>

<style scoped>
.form {
  width: 65%;
}

.el-pagination {
  margin-top: 10px;
}
</style>
